<template>
    <div class="pages-container">
        <PageHeader>
            <section slot="menu">
                <Poptip v-model="isLabelActive" title="ENVIRONMENT" placement="bottom-start">
                    <div :class="['text-label', labelActiveClass]" @click.stop="showProjectList(true)">
                        <span>E</span>
                    </div>
                </Poptip>
            </section>
            <section slot="option" class="option-list"> <Options /> </section>
        </PageHeader>
        <section class="page-home-body">
            <div class="page-home-body-container" :style="{ width: asideX + 'px' }">
                <aside class="page-home-body-aside">
                    <div class="aside-header">
                        <div></div>
                        <ul class="aside-header-tab">
                            <li
                                v-for="(item, index) in tabs"
                                :key="index"
                                @click="setTabActiveIndex(index)"
                                :class="[tabActiveIndex === index ? 'tab-active-class' : '']"
                                ><Icon :type="item.type" :color="item.color" size="18"
                            /></li>
                        </ul>
                    </div>
                    <div class="aside-body">
                        <keep-alive>
                            <component v-bind:is="currentTabComponent"></component>
                        </keep-alive>
                    </div>
                </aside>
                <div class="body-aside-right-view" @mousedown="widthResizeStart" @mouseup="widthResizeEnd"></div>
            </div>
            <main class="page-home-container" :style="{ width: `calc(100% - ${asideX}px)` }">
                <MainContainer></MainContainer
            ></main>
        </section>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { IntrinsicElements } from '@/appTypes';
    import PageHeader from '@/components/pageHeader/index.vue';
    import Options from '@/views/home/options.vue';
    import Histories from './histories.vue';
    import Projects from './projects.vue';
    import Collections from './collections.vue';
    import MainContainer from '@/views/home/mainContainer.vue';
    @Component({ components: { PageHeader, Options, Histories, Projects, Collections, MainContainer } })
    export default class Home extends Vue<IntrinsicElements> {
        currentTabComponent = 'Histories';
        asideX = 350;
        isLabelActive = false;
        tabActiveIndex = 0;
        tabs = [
            {
                type: 'md-analytics',
                color: '#5d8611',
                componentName: 'Histories'
            },
            {
                type: 'md-cube',
                color: '#5d8611',
                componentName: 'Projects'
            },
            {
                type: 'ios-heart',
                color: '#5d8611',
                componentName: 'Collections'
            }
        ];
        public widthResizeStart(ev: any): void {
            this.asideX = ev.clientX + 2;
            document.addEventListener('mousemove', this.onMouseMove);
        }
        public onMouseMove(e: any) {
            if (e.clientX < 250) {
                this.asideX = 252;
                document.removeEventListener('mousemove', this.onMouseMove);
            } else if (this.asideX > 400) {
                this.asideX = 398;
                document.removeEventListener('mousemove', this.onMouseMove);
            } else {
                this.asideX = e.clientX + 2;
            }
        }
        public widthResizeEnd(e: any) {
            document.removeEventListener('mousemove', this.onMouseMove);
        }
        public showProjectList(showList: boolean) {
            this.isLabelActive = showList;
        }
        public setTabActiveIndex(index: number) {
            this.tabActiveIndex = index;
            this.currentTabComponent = this.tabs[index].componentName;
        }
        get labelActiveClass() {
            return this.isLabelActive ? 'label-active' : '';
        }
    }
</script>

<style scoped src="./index.less" lang="less"></style>
